<template>
  <Breadcrumb>
    <template v-for="item in breadCrumbs">
      <BreadcrumbItem style="font-size: 16px">{{ item.meta.title }}</BreadcrumbItem>
    </template>
  </Breadcrumb>
</template>

<script setup>

import {getCurrentInstance, onMounted, ref, watch} from "vue";

const {proxy} = getCurrentInstance();

const breadCrumbs = ref([]);

const getBreadCrumb = (route) => {
  const matched = route.matched.filter((item) => item.meta && item.meta.title)
  breadCrumbs.value = matched;
}

watch(() => {
  getBreadCrumb(proxy.$route)
  console.log(breadCrumbs.value)
}, {
  immediate: true,
  deep: true
})

onMounted(() => {
})

</script>

<style scoped lang="less">
@import "./custom-bread-crumb.less";
</style>
